Nested Containers এবং Dynamic Layouts

ExtJS একটি শক্তিশালী UI ফ্রেমওয়ার্ক, যা কমপ্লেক্স এবং রেসপন্সিভ ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য বিভিন্ন ধরনের Containers এবং Layouts সরবরাহ করে। Nested Containers এবং Dynamic Layouts ব্যবহার করে, আপনি আরও জটিল UI স্ট্রাকচার তৈরি করতে পারবেন এবং অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারবেন।

১. Nested Containers

Containers হল ExtJS-এর উপাদান যা অন্য কম্পোনেন্ট বা উপাদানগুলো ধারণ করে। Nested Containers বলতে বোঝায় একটি কন্টেইনারের মধ্যে অন্য কন্টেইনার ব্যবহার করা। এটি বিভিন্ন স্তরে UI উপাদানগুলোকে গ্রুপিং এবং পজিশনিং করতে সহায়ক।

Nested Containers উদাহরণ:

ধরা যাক, আমাদের একটি Panel আছে যার মধ্যে একটি Toolbar, একটি Form, এবং একটি Grid রয়েছে। এখানে, আমরা এই কন্টেইনারগুলোর মধ্যে Nested Containers ব্যবহার করব।

Ext.create('Ext.panel.Panel', {
    title: 'Main Panel',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    layout: 'vbox', // Vertical layout for the parent container
    items: [
        {
            xtype: 'toolbar',
            width: '100%',
            items: [
                { text: 'Button 1' },
                { text: 'Button 2' }
            ]
        },
        {
            xtype: 'panel',
            title: 'Nested Panel',
            layout: 'hbox', // Horizontal layout for the nested container
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    flex: 1
                }
            ]
        },
        {
            xtype: 'grid',
            title: 'User Data',
            store: {
                fields: ['id', 'name', 'email'],
                data: [
                    { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
                    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' }
                ]
            },
            columns: [
                { text: 'ID', dataIndex: 'id' },
                { text: 'Name', dataIndex: 'name' },
                { text: 'Email', dataIndex: 'email' }
            ]
        }
    ]
});

এখানে:

• Main Panel একটি vertical (vbox) লেআউট ব্যবহার করছে, যার মধ্যে একাধিক কম্পোনেন্ট রয়েছে।
• একটি Nested Panel রয়েছে যার মধ্যে horizontal (hbox) লেআউট ব্যবহার করা হয়েছে, এবং সেখানে দুটি TextField রাখা হয়েছে।

এটি একটি সাধারণ nested container উদাহরণ, যেখানে এক কন্টেইনারের ভিতরে আরেকটি কন্টেইনার রয়েছে এবং তারা নিজেদের মধ্যে ইন্টারঅ্যাক্ট করে।

২. Dynamic Layouts

Dynamic Layouts এর মাধ্যমে আপনি কন্টেইনারের লেআউটকে রানটাইমে পরিবর্তন করতে পারেন। এটি বিভিন্ন পরিস্থিতির উপর ভিত্তি করে কন্টেইনারের লেআউট পরিবর্তন করার জন্য ব্যবহৃত হয়, যেমন একটি কন্টেইনারের আকার পরিবর্তন হলে তার ভিতরের উপাদানগুলোও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

Dynamic Layouts উদাহরণ:

ধরা যাক, একটি Panel রয়েছে যেটির লেআউট শুরুতে hbox এবং পরে একটি বাটন ক্লিক করার পর সেটি vbox লেআউটে পরিবর্তিত হবে।

Ext.create('Ext.panel.Panel', {
    title: 'Dynamic Layout Example',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    layout: 'hbox', // Initially horizontal layout
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'First Name',
            flex: 1
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Last Name',
            flex: 1
        },
        {
            xtype: 'button',
            text: 'Change Layout',
            handler: function() {
                // Dynamically change the layout to 'vbox'
                var panel = this.up('panel');
                panel.setLayout('vbox');
            }
        }
    ]
});

এখানে:

• প্রথমে hbox লেআউট ব্যবহার করা হয়েছে, যাতে টেক্সটফিল্ডগুলো একে অপরের পাশে থাকে।
• Change Layout বাটন ক্লিক করার পর, setLayout('vbox') মেথডের মাধ্যমে লেআউটটি vbox (vertical) এ পরিবর্তিত হবে এবং উপাদানগুলো একটির নিচে একে রেখে প্রদর্শিত হবে।

এটি Dynamic Layout ব্যবহারের একটি সাধারণ উদাহরণ যেখানে লেআউট রানটাইমে পরিবর্তিত হয়।

৩. Common Layout Types in ExtJS

ExtJS বেশ কয়েকটি সাধারণ লেআউট সিস্টেম সরবরাহ করে যা কম্পোনেন্টগুলোর পজিশন এবং আকার নিয়ন্ত্রণ করতে সহায়ক:

1. hbox / vbox Layout:

   • hbox লেআউট উপাদানগুলোকে অনুভূমিকভাবে সাজায়।
   • vbox লেআউট উপাদানগুলোকে উল্লম্বভাবে সাজায়।

   উদাহরণ:

   layout: 'hbox' // Horizontal layout
   layout: 'vbox' // Vertical layout
   

2. border Layout:

   • এই লেআউটটি একটি কন্টেইনারকে পাঁচটি অঞ্চলে ভাগ করে: North, South, East, West, এবং Center।

   উদাহরণ:

   layout: 'border',
   items: [
       {
           region: 'north',
           xtype: 'panel',
           height: 50
       },
       {
           region: 'center',
           xtype: 'grid',
           title: 'Main Grid'
       }
   ]
   

3. fit Layout:

   • একমাত্র কম্পোনেন্ট পুরো কন্টেইনারে ফিট হবে।

   উদাহরণ:

   layout: 'fit',
   items: [{
       xtype: 'panel',
       title: 'Fitted Panel'
   }]
   

4. absolute Layout:

   • এই লেআউটটি একটি নির্দিষ্ট x এবং y কোঅর্ডিনেটের ভিত্তিতে কম্পোনেন্টগুলোর অবস্থান নির্ধারণ করে।

   উদাহরণ:

   layout: 'absolute',
   items: [{
       xtype: 'button',
       text: 'Click Me',
       x: 100,
       y: 50
   }]
   

সারাংশ

1. Nested Containers: এক কন্টেইনারের ভিতরে আরেকটি কন্টেইনার রাখা যা কম্পোনেন্টগুলোর মধ্যে সম্পর্ক তৈরি করে এবং আরো জটিল UI স্ট্রাকচার তৈরি করতে সহায়ক।
2. Dynamic Layouts: আপনি কন্টেইনারের লেআউট রানটাইমে পরিবর্তন করতে পারেন, যা আরও ইউজার-বান্ধব এবং রেসপন্সিভ ডিজাইন তৈরি করতে সহায়ক।
3. Common Layout Types: ExtJS বিভিন্ন লেআউট সিস্টেম সরবরাহ করে, যেমন hbox, vbox, border, fit, absolute, ইত্যাদি, যা কন্টেইনার এবং তার উপাদানগুলোর পজিশন এবং আকার নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

এগুলি nested containers এবং dynamic layouts ব্যবহার করে আরও ফ্লেক্সিবল, রেসপন্সিভ এবং ইন্টারেক্টিভ UI তৈরি করার জন্য খুবই গুরুত্বপূর্ণ উপাদান।